<template>
	<view class="detail">
		<view class="img">
			<image v-if="state.details.goodsImg" :src="IMG_URL + state.details.goodsImg" mode="widthFix"></image>
		</view>
		<view class="info">
			<view class="name">品名：{{ state.details.goodsName }}</view>
			<view class="price">价格：￥{{ state.details.goodsPrice }}</view>
			<view class="colors">颜色：{{ state.details.goodsColor }}</view>
			<view class="count">
				<text>数量：</text>
				<button @click="reduce">-</button>
				<input v-model="count" />
				<button @click="add">+</button>
			</view>
			<view class="des">{{ state.details.goodsInfo }}</view>
		</view>

		<view class="bar">
			<view class="total" v-if="total">合计：￥{{ total }}.00</view>
			<view class="fav" @click="addFav(state.details._id)">{{ isFav? '取消收藏': '加入收藏' }}</view>
			<!-- <view class="buy"><button type="default" open-type="getUserInfo" @click="buyEvent2">立即购买</button></view> -->
			<view class="buy" @click="buy(state.details._id)">立即购买</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from "vue"
	import {
		onLoad,
		onReady
	} from "@dcloudio/uni-app";
	import {
		IMG_URL,
		BASE_URL
	} from "@/config/index.js"

	const count = ref(1)
	const id = ref(0)
	const isFav = ref(false)
	const state = reactive({
		details: {}
	})

	const total = computed(() => state.details.goodsPrice * count.value)

	const getDetail = () => {
		uni.showLoading({
			title: '加载中',
			mask: false
		});
		uni.request({
			url: `${BASE_URL}show`,
			method: 'GET',
			data: {
				id: id.value
			},
			success: res => {
				const {
					data
				} = res.data
				state.details = {
					.data
				}
			},
			complete: () => {
				uni.hideLoading();
			}
		});
	}

	const getIsFav = () => {
		console.log('-----')
		const {
			token
		} = uni.getStorageSync('USER_TOKENS') || {}
		uni.request({
			url: `${BASE_URL}favStatus`,
			method: 'GET',
			header: {
				Authorization: 'bearer ' + token
			},
			data: {
				id: id.value
			},
			success: res => {
				const {
					isFav: _isFav
				} = res.data
				isFav.value = _isFav
			}
		});
	}

	const add = () => {
		count.value++
	}

	const reduce = () => {
		if (count.value > 1) {
			count.value--
		}
	}


	const addFav = (id) => {
		const {
			token
		} = uni.getStorageSync('USER_TOKENS') || {}
		if (!token) {
			uni.navigateTo({
				url: "/pages/otherPages/login"
			})
			return
		}
		uni.request({
			url: `${BASE_URL}fav`,
			method: 'GET',
			header: {
				Authorization: `bearer ${token}`
			},
			data: {
				id
			},
			success: res => {
				const {
					code,
					msg
				} = res.data
				if (code == 2) {
					uni.showToast({
						icon: 'success',
						title: msg
					})
					getIsFav()
				}
			}
		});
	}

	const buy = () => {
		const {
			token
		} = uni.getStorageSync('USER_TOKENS') || {}
		if (!token) {
			uni.navigateTo({
				url: "/pages/otherPages/login"
			})
			return
		}

		const {
			goodsName,
			goodsColor,
			goodsImg,
			goodsPrice
		} = state.details


		uni.request({
			url: `${BASE_URL}buy`,
			method: 'POST',
			header: {
				Authorization: `bearer ${token}`
			},
			data: {
				userOpenid: token,
				goodsName,
				goodsImg,
				goodsColor,
				goodsPrice,
				goodsCount: count.value,
				orderTotal: total.value
			},
			success: res => {
				console.log(res.data);
				if (res.data.code == 2) {
					uni.showToast({
						icon: 'success',
						title: '下单成功！'
					})
					uni.switchTab({
						url: '/pages/tabBarPages/order/index'
					})
				}
			}
		});
	}

	onLoad((options) => {
		id.value = options.id
	})

	onReady(() => {
		getDetail()
		getIsFav()
	})
</script>

<style lang="scss" scoped>
	.img {
		width: 100%;
		height: 600upx;
		overflow: hidden;

		image {
			width: 100%;
		}
	}

	.info {
		padding: 30upx;
		line-height: 2;

		.name {
			font-weight: bold;
			font-size: 32upx;
			letter-spacing: 5upx;
		}

		.price {
			color: red;
			letter-spacing: 5upx;
			font-weight: bold;
		}

		.colors {
			margin-bottom: 10upx;
		}

		.count {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			button {
				margin: initial;
				padding: 0upx 25upx;
				line-height: initial;
				border-radius: 2upx;
				background: #f9f9f9;
			}

			input {
				width: 50upx;
				text-align: center;
				border-radius: 2upx;
				border: 1upx solid #efefef;
				margin: 0 3upx;
			}
		}

		.des {
			margin-top: 30upx;
		}
	}

	.bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 90upx;
		line-height: 90upx;
		z-index: 10;
		background: #efefef;

		.total {
			margin-right: auto;
			color: red;
			padding-left: 20upx;
		}

		.fav {
			padding: 0 30upx;
			background: #f90;
			text-align: center;
			color: #fff;
		}

		.buy {
			@extend .fav;
			background: #b10936;

			button {
				background: transparent;
				border: none;
				color: #fff;
				font-size: 28upx;
				line-height: 90upx;
			}
		}
	}
</style>